import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import React from 'react';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import Home from '../home/Home';
import Shop from '../shop/Shop';
import Message from '../message/Message';
import Mine from '../mine/Mine';

import icon_tab_publish from '../../assets/icon_tab_publish.png';
import {
  type ImagePickerResponse,
  launchImageLibrary,
} from 'react-native-image-picker';

const BottomTab = createBottomTabNavigator();
const RedBookTabBar = ({
  state,
  descriptors,
  navigation,
}: any): React.JSX.Element => {
  console.log(state);

  const {routes, index} = state;
  return (
    <View style={styles.tabBarContainer}>
      {routes.map((route: any, i: number) => {
        const {options} = descriptors[route.key];
        const label = options.title;
        const isFocused = index === i;
        if (i === 2) {
          return (
            <TouchableOpacity
              activeOpacity={0.5}
              key={label}
              style={styles.tabItem}
              onPress={() => {
                launchImageLibrary(
                  {mediaType: 'photo', quality: 1, includeBase64: true},
                  (res: ImagePickerResponse) => {
                    const {assets} = res;
                    if (!assets?.length) {
                      return;
                    }
                    const {uri, width, height, fileName, fileSize, type} =
                      assets[0];
                    console.log(`uri=${uri},width=${width},height=${height}`);
                    console.log(
                      `fileName=${fileName},fileSize=${fileSize},type=${type}`,
                    );
                  },
                );
              }}>
              <Image
                style={styles.iconTabPublish}
                source={icon_tab_publish} />
            </TouchableOpacity>
          );
        } else {
          return (
            <TouchableOpacity
              activeOpacity={0.5}
              key={label}
              style={styles.tabItem}
              onPress={() => {
                navigation.navigate(route.name);
              }}>
              <Text
                style={{
                  fontSize: isFocused ? 16 : 14,
                  color: isFocused ? '#333' : '#999',
                  fontWeight: isFocused ? 'bold' : 'normal',
                }}>
                {label}
              </Text>
            </TouchableOpacity>
          );
        }
      })}
    </View>
  );
};

const renderRedBookTabBar = (props:any)=>{
  return RedBookTabBar(props);
};
export default () => {

  return (
    <View style={styles.root}>
      <BottomTab.Navigator
        tabBar={renderRedBookTabBar}>
        <BottomTab.Screen
          name="Home"
          component={Home}
          options={{
            title: '首页',
            headerShown: false,
          }} />
        <BottomTab.Screen
          name="Shop"
          component={Shop}
          options={{
            title: '购物',
            headerShown: false,
          }} />
        <BottomTab.Screen
          name="Publish"
          component={Shop}
          options={{
            title: '发布',
            headerShown: false,
          }} />
        <BottomTab.Screen
          name="Message"
          component={Message}
          options={{
            title: '消息',
            headerShown: false,
          }} />
        <BottomTab.Screen
          name="Mine"
          component={Mine}
          options={{
            title: '我',
            headerShown: false,
          }} />
      </BottomTab.Navigator>
    </View>
  );
};

const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: '100%',
  },
  tabBarContainer: {
    width: '100%',
    height: 50,
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  tabItem: {
    height: '100%',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  iconTabPublish: {
    width: 65,
    height: 42,
    resizeMode: 'contain',
  },
});
